<template>
    <div class="lg-container">
        <div class="row" ref="listwarp">
            <div v-show="!leftOrRight" class="leftBtn iconfont icon-zuojiantou cu-text-blue" @click="moveItem('left')"></div>
            <div v-show="leftOrRight" class="rightBtn iconfont icon-youjiantou cu-text-blue" @click="moveItem()"></div>
            <div class="itemwarp d-flex flex-row" ref="itemwarp">
                <div class="item" ref="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005CF4F54A859B5D97960867AA?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E40005B63F161AD881A94A00670CF?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="img-title">
                            <span class="label-exclusive">独播</span>
                            <img class="card-img-top cu-hand" src="https://r1.ykimg.com/050E00005E156FC9859B5EC6380C8C09?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                            <span class="pack_p_rb">27集全</span>
                        </div>
                        <h4 class="text-truncate cu-text-blue">花小厨💓林间烤肉</h4>
                        <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "lg",
        data(){
          return{
              leftOrRight:true
          }
        },
        methods:{
            moveItem(orientation ='right'){
                let listwarp=this.$refs.listwarp.offsetWidth;
                let itemwarp=this.$refs.itemwarp;
                let item=this.$refs.item.offsetWidth;
                let hidenNum=Math.round((itemwarp.offsetWidth-listwarp)/item);
                let Distance=hidenNum*item;
                if(Distance<item){return;}
                itemwarp.style.transition='all 1.5s ease-in-out';
                if(orientation=='right'){
                    itemwarp.style.transform=`translateX(${-(Distance)}px)`;
                    this.leftOrRight=false;
                }else {
                    itemwarp.style.transform=`translateX(0)`;
                    this.leftOrRight=true;
                }
                //js监听窗口变化
                window.onresize = ()=>{
                    itemwarp.style.transform=`translateX(0)`;
                    this.leftOrRight=true;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
.lg-container{
    overflow: hidden;
    .row{
        position: relative;
        .rightBtn,.leftBtn{
            font-size: 18px;
            width: 26px;
            height: 44px;
            text-align: center;
            top: 45%;
            color: white;
            position: absolute;
            z-index: 20;
            cursor: pointer;
            background-color: rgba(32,32,32,.7);
            transform: translateY(-50%);
            &:before{
                line-height: 44px;
            }
        }
        .rightBtn{
            right: 10px;
            padding-left: 5px;
            border-radius: 26px 0 0 26px;
        }
        .leftBtn{
            left: 10px;
            border-radius: 0 26px 26px 0;
        }
        .itemwarp{
            padding: 0 15px;
        }
        .item{
            max-width: 222px;
            max-height: 364px;
            min-height: 322px;
            padding: 0 12px 0 0;
            .img-title{
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                .pack_p_rb{
                    position: absolute;
                    right: 5px;
                    z-index: 15;
                    bottom: 5px;
                    user-select:none;
                    color: white;
                }
            }
            .card{
                background-color: rgba(0,0,0,0);
                overflow: hidden;
                .card-img-top:hover{
                    transition: all 0.3s linear;
                    transform: scale(1.08,1.08);
                }
                .label-vip,.label-exclusive{
                    position: absolute;
                    border-radius: 0 0 2px 2px;
                    font-size: 12px;
                    line-height: 150%;
                    color: white;
                    right: 5px;
                    top: 5px;
                    padding: 0 5px;
                    user-select:none;
                    z-index: 15;
                }
                .label-vip{
                    background-color: #ebba73;
                }
                .label-exclusive{
                    background-color: #fc4273;
                    cursor: pointer;
                }
                h4{
                    font-size: 18px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    color: hsla(0,0%,100%,.87);
                }
                h5{
                    font-size: 13px;
                    color: #99a9bf;
                }
            }
        }
    }
}
@media (max-width: 1242px){
    .lg-container .itemwarp .item{
        width: 194px;
    }
}
@media (min-width: 1245px) and (max-width: 1330px){
    .lg-container .itemwarp .item{
        width: 192px;
    }
}
@media (min-width: 1335px) and (max-width: 1600px){
    .lg-container .itemwarp .item{
        width: 207px;
    }
}
@media (min-width: 1600px) and (max-width: 1800px){
    .lg-container .itemwarp .item{
        width: 222px;
    }
}
@media (min-width: 1800px){
    .lg-container .row {
        .rightBtn,.leftBtn{
            display: none;
        }
    }
}
</style>